<template>
<div>
    <el-row class="myCreateOrderrow10" type="flex" justify="center">
        <el-col :span="14" class="myCreateOrdercol10">
            <div class="myCreateOrdercol10SpanLeftdiv">
                <span class="myCreateOrdercol10SpanLeft">支付方式</span>
            </div>
        </el-col>
        <el-col :span="10"></el-col>
    </el-row>
    <el-row class="myCreateOrderrow11" type="flex" justify="center">
        <el-col :span="1"></el-col>
        <el-col :span="22" class="myCreateOrdercol11">
            <img src="../../assets/icon/radio.png" class="RadioImg">
            <span class="RadioText">在线支付</span>
            <span class="RadioDetails">支持绝大多数银行卡、微信支付等，请在提交订单后选择。</span>
        </el-col>
        <el-col :span="1"></el-col>
    </el-row>
    <el-row class="myCreateOrderrow12" type="flex" justify="center">
        <el-col :span="14" class="myCreateOrdercol12">
            <div class="myCreateOrdercol12SpanLeftdiv">
                <span class="myCreateOrdercol12SpanLeft">发票信息</span>
                <span class="myCreateOrdercol12SpanRight" :style="ChangeInvoiceStyle"
                @mouseover="mouseoverChangeInvoice" @mouseleave="mouseleaveChangeInvoice"
                @click="ChangeInvoiceBtn">
                修改</span>
            </div>
        </el-col>
        <el-col :span="10" class="myCreateOrdercol12"></el-col>
    </el-row>
    <el-row class="myCreateOrderrow13" type="flex" justify="center">
        <el-col :span="24" class="myCreateOrdercol13">
            <div class="myCreateOrdercol13Spandiv">
                <span class="myCreateOrdercol13Span1">开票方式：</span>
                <span class="myCreateOrdercol13Span2">电子发票</span>
            </div>
        </el-col>
    </el-row>
    <el-row class="myCreateOrderrow13" type="flex" justify="center" style="margin-top: -5px;">
        <el-col :span="24" class="myCreateOrdercol13">
            <div class="myCreateOrdercol13Spandiv">
                <span class="myCreateOrdercol13Span1">发票抬头：</span>
                <span class="myCreateOrdercol13Span2">{{ReceiveName}}</span>
            </div>
        </el-col>
    </el-row>
    <el-row class="myCreateOrderrow13" type="flex" justify="center" style="margin-top: -5px;margin-bottom: 45px;">
        <el-col :span="24" class="myCreateOrdercol13">
            <div class="myCreateOrdercol13Spandiv">
                <span class="myCreateOrdercol13Span3">*</span>
                <span class="myCreateOrdercol13Span4">hggood自营商品将为您自动开票</span>
            </div>
        </el-col>
    </el-row>
</div>
</template>

<script>
export default {
    name:'XiaoCOPayInfoUp',
    data(){
        return{
            OnlinePay:1,
            ChangeInvoiceStyle:'',
            ReceiveName:'',
        }
    },
    methods:{
        mouseoverChangeInvoice(){
            this.ChangeInvoiceStyle="color: rgb(138, 179, 255);"
        },
        mouseleaveChangeInvoice(){
            this.ChangeInvoiceStyle=''
        },
        ChangeInvoiceBtn(){
            console.log('ChangeInvoiceBtn!');
        }
    },
    mounted(){
        this.$bus.$on('CheckedAddress',(data)=>{
            this.ReceiveName=data.name
        })
    },
    beforeDestroy(){
        this.$bus.$off('CheckedAddress')
    }
}
</script>

<style scoped>
.myCreateOrderrow10{
    margin: 0 auto;
    max-width: 1000px;
    margin-top: 20px;
    height: 100%;
}
.myCreateOrdercol10{
    margin-left: 10px;
    margin-right: 10px;
    height: 40px;
}
.myCreateOrdercol10SpanLeftdiv{
    margin-top: 10px;
}
.myCreateOrdercol10SpanLeft{
    font-size: 14px;
    font-weight: 550;
    width:135px;
}

.myCreateOrderrow11{
    margin: 0px auto;
    max-width: 1000px;
    margin-top: 8px;
    height: 100%;
}
.myCreateOrdercol11{
    cursor: pointer;
    height: 60px;
    background-color: rgba(243, 255, 232, 0.3);
    border: 1px solid rgb(93, 180, 93);
}
.RadioImg{
    margin-top: 19px;
    margin-left: 15px;
    height: 22px;
    width: 22px;
}
.RadioText{
    position: absolute;
    font-size: 14px;
    margin-left: 5px;
    margin-top: 20px;
}
.RadioDetails{
    position: absolute;
    font-size: 12px;
    margin-top: 22px;
    margin-left: 82px;
    opacity: 0.6;
}

.myCreateOrderrow12{
    margin: 0 auto;
    max-width: 1000px;
    margin-top: 50px;
    height: 100%;
    border-top: 1px dashed rgb(179, 179, 179 , 0.7);
}
.myCreateOrdercol12{
    margin-left: 10px;
    margin-right: 10px;
    height: 40px;
}
.myCreateOrdercol12SpanLeftdiv{
    margin-top: 25px;
}
.myCreateOrdercol12SpanLeft{
    font-size: 14px;
    font-weight: 550;
    width:135px;
}
.myCreateOrdercol12SpanRight{
    cursor: pointer;
    color: rgb(63, 119, 241);
    margin-left: 15px;
    font-size: 12px;
}
.myCreateOrderrow13{
    margin: 0 auto;
    max-width: 1000px;
    margin-top: 5px;
    height: 100%;
    font-size: 14px;
}
.myCreateOrdercol13{
    margin-left: 10px;
    margin-right: 10px;
    height: 40px;
}
.myCreateOrdercol13Spandiv{
    margin-top: 10px;
}
.myCreateOrdercol13Span2{
    margin-left: 20px;
}
.myCreateOrdercol13Span3{
    margin-left: 5px;
    opacity: 0.6;
    font-size: 18px;
}
.myCreateOrdercol13Span4{
    margin-left: 5px;
    position: absolute;
    opacity: 0.6;
    font-size: 12px;
}
</style>